<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../easyui-config.js"></script>
    <script type="text/javascript" src="json-data.js"></script>

</head>
<body>
    <div>
        <table id="datagrid"></table>
        <script>
            $(() => {
                $("#datagrid").datagrid({
                    data: data,
                    rownumbers: true,
                    singleSelect: false,
                    columns: [[
                        { field: '', checkbox: true },
                        { field: 'itemid', title: 'Item ID', width: 80 },
                        { field: 'productid', title: 'Product ID', width: 120 },
                        { field: 'listprice', title: 'List Price', width: 80, align: 'right' },
                        { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
                        { field: 'attr1', title: 'Attribute', width: 250 },
                        { field: 'status', title: 'Status', width: 60, align: 'center' }
                    ]]
                });
            });
        </script>
    </div>
    <div style="height:50px;"></div>
    <div>
        <table id="datagrid1" class="easyui-datagrid" style="width:700px;height:250px" data-options="
               data:data,singleSelect:false,
			   collapsible: true,
			   rownumbers: true
               ">
            <thead data-options="frozen:true">
                <tr>
                    <th data-options="field:'',checkbox:true"></th>
                    <th data-options="field:'itemid',width:100">Item ID</th>
                    <th data-options="field:'productid',width:120">Product</th>
                </tr>
            </thead>
            <thead>
                <tr>
                    <th data-options="field:'listprice',width:90,align:'right'">List Price</th>
                    <th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th>
                    <th data-options="field:'attr1',width:230">Attribute</th>
                    <th data-options="field:'status',width:60,align:'center'">Status</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>